<template >
<div :class="parentKey=='root'?'zt-root':'zt-node'">
     
       <span  v-show="typeof JsonList ==='object'" :class="isshow?'open':''"  @click='handleDirClick()' class="zt-toggle"></span>   
      <span   
      v-if="keyword"         
      draggable="true"
      @dragstart="DragStart($event,keyword)"
      @dragend="dragend($event)"
       @click.stop='handleKeyClick' class="zt-key"    > {{keyword}}</span> 
      <span    v-if="keyword" >:</span>
    <template v-if="componentId=='a1'" class="zt-item zt-array">
      <!-- <span  :class="isshow?'open':''"  @click='handleDirClick()' class="zt-toggle"></span>     -->

        <!-- <i :class="!isshow?'el-icon-arrow-right':'el-icon-arrow-down'" @click.stop="handleDirClick()"></i> -->
        <span class="zt-item zt-array">[</span>
        <span v-if="!isshow" @click.stop="handleDirClick()" class="zt-ellipsis">...</span>
        <template v-else >
          <jsonver @handleClick="handleClick" :parentKey="parentKeyFor(key)" :key="key" v-for="(item,key) in JsonList" :JsonList="item"></jsonver> 
           
        </template>
           <span class="zt-item zt-array">]</span>
        </template>
    <template v-if="componentId=='o1'" class="zt-object"> 
                  <span class="zt-item">{</span> 
   <span v-if="!isshow" @click.stop="handleDirClick()" class="zt-ellipsis">...</span>
        <template v-else >
            <div v-for="(val,keys,i) in JsonList" class="zt-node zt-obj" :key="parentKey+i" >
            <!-- <i v-show="typeof val ==='object'" :class="isshow?'el-icon-arrow-right':'el-icon-arrow-down'"></i> -->
            <jsonver class="zt-value" 
            @keywordDragStart="keywordDragStart($event)"
             @handleClick="handleClick" :keyword="keys" :ref='parentKey+"_"+i' :parentKey="parentKeyFor(keys)"  :JsonList="val"></jsonver> 
            </div>
            </template>
            <span class="zt-item">}</span> 
    </template>
        <span v-if="componentId=='s1'" class="zt-item zt-string">
   {{JsonList}}
    </span>
        <span v-if="componentId=='n1'" class="zt-item zt-number">
 {{JsonList}}
    </span>
            <span v-if="componentId=='f1'" class="zt-item zt-function">
 <pre v-pre>[function]</pre>
    </span>
</div>
</template>
<script>
function type(obj) {
  return Object.prototype.toString
    .call(obj)
    .slice(8, -1)
    .toLocaleLowerCase();
}
export default {
  name: "jsonver",
  props: {
    JsonList: {
      type: null
    },
    parentKey: {
      type: [String],
      default: ""
    },
    keyword: {
      type: null
    }
  },
  data() {
    return {
      isshow: false
    };
  },
  created() {
    console.log(this.parentKey);
  },
  methods: {
    parentKeyFor(key) {
      console.log(this.parentKey == "");
      if (this.parentKey == "") {
        return key;
      } else if (type(this.JsonList) === "object") {
        return `${this.parentKey}.${key}`;
      } else if (type(this.JsonList) === "array") {
        return `${this.parentKey}[${key}]`;
      } else return "";
    },
    DragStart($event, value) {
      $event = event || window.event;
      $event.dataTransfer.setData("name", this.parentKey);
      document.body.style.cursor = "move";
      this.$emit("keywordDragStart", {
        e: $event,
        value
      });
    },
    dragend() {
      document.body.style.cursor = "";
    },
    keywordDragStart(e) {
      this.$emit("keywordDragStart", e);
    },
    handleKeyClick() {
      // console.log(val, key, parentKey);
      // alert(this.parentKey)
      console.log(this.keyword, this.parentKey);
      this.$emit("handleClick", this.parentKey);
    },
    handleClick(parentKey) {
      this.$emit("handleClick", parentKey);
    },
    handleDirClick() {
      this.isshow = !this.isshow;
    },
    handleChildClick(ref, item) {
      console.log(item);
      item.constructor.prototype.isopen = !item.constructor.prototype.isopen;
      this.$nextTick(() => {
        this.$refs[ref][0].isshow = !this.$refs[ref][0].isshow;
      });
    }
  },
  computed: {
    componentId() {
      const that = this;
      switch (type(that.JsonList)) {
        case "string":
          return "s1";
          break;
        case "number":
          return "n1";
          break;
        case "undefined":
          return "s1";
          break;
        case "boolean":
          return "s1";
          break;
        case "null":
          return "s1";
          break;
        case "object":
          for (let s in that.JsonList) {
            const item = that.JsonList[s];
            console.log(item);
            if (type(item) === "object" || type(item) === "array") {
              item.constructor.prototype.isopen = false;
            }
          }
          return "o1";
          break;
        case "array":
          for (let s in that.JsonList) {
            if (type(s) === "object" || type(s) === "array") {
              s.constructor.prototype.isopen = false;
            }
          }
          return "a1";
          break;
        case "function":
          return "f1";
          break;
        case "regexp":
          return "s1";
          break;
        default:
          return "jsonVer";
          break;
      }
    }
  }
};
</script>
<style lang="css">
@import "./index.css";
</style>

